<!DOCTYPE html>
<html>
<head>
    <title>学习</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <div>
            <img :src="list[index]" alt="" />
        </div>
        <button v-show="index < list.length - 1" @click="index++">下一页</button>

        <div>
            <ul>
                <li v-for = "(item, index) in fruit_list">
                    {{ item }} - {{ index }}
                </li>
            </ul>

            <ul>
                <li v-for = "item in fruit_list">
                    {{ item }}
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li v-for="(item, index) in book_list" :key="item.id">
                    <span>{{ item.name }}</span>
                    <span>{{ item.author }}</span>
                    <button @click="del(item.id)">删除</button>
                </li>
            </ul>
        </div>

        <div>
            账号：<input type="text" v-model="username"></input>
            密码：<input type="password" v-model="password"></input>
            <button @click="login">登录</button>
            <button @click="reset">重置</button>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                index: 0,
                list: [
                    './img/440.png',
                    './img/441.png',
                    './img/443.png',
                    './img/444.png',
                    './img/446.png',
                    './img/451.png',
                    './img/544.png',
                ],
                fruit_list: ['苹果', '梨子', '西瓜'],
                book_list: [
                    {id: 1, name: '红楼梦', author: '曹雪芹'},
                    {id: 2, name: '西游记', author: '吴承恩'},
                    {id: 3, name: '水浒传', author: '施耐庵'},
                    {id: 4, name: '三国演义', author: '罗贯中'}
                ],
                username: "",
                password: ""
            },
            methods: {
                del(id) {
                    console.log("删除", id)
                    this.book_list = this.book_list.filter(item => item.id != id)
                },
                login() {
                    console.log(this.username + "," + this.password)
                },
                reset() {
                    this.username = "",
                    this.password = "" 
                }
            }
        })
    </script>
</body>
</html>